<template>
    <div class="feedback-container">
      <el-button type="text" @click="goHome" class="back-home-btn">返回首页</el-button>
      
      <h2 class="feedback-title">意见反馈</h2>
      
      <el-form 
        ref="feedbackFormRef" 
        :model="feedbackForm" 
        :rules="rules" 
        label-width="100px"
        @submit.prevent="submitFeedback"
      >
        <!-- 反馈类型选择 -->
        <el-form-item label="反馈类型" prop="type">
          <el-select 
            v-model="feedbackForm.type" 
            placeholder="请选择反馈类型"
            clearable
          >
            <el-option 
              v-for="option in typeOptions" 
              :key="option.value"
              :label="option.label" 
              :value="option.value"
            />
          </el-select>
        </el-form-item>
  
        <!-- 反馈内容输入 -->
        <el-form-item label="反馈内容" prop="content">
          <el-input
            type="textarea"
            v-model="feedbackForm.content"
            :rows="5"
            placeholder="请输入详细反馈内容"
          />
        </el-form-item>
  
        <!-- 联系方式 -->
        <el-form-item label="联系方式" prop="contact">
          <el-input
            v-model="feedbackForm.contact"
            placeholder="请输入邮箱/手机号（选填）"
          />
        </el-form-item>
  
        <!-- 操作按钮 -->
        <el-form-item>
          <el-button 
            type="primary" 
            native-type="submit"
            :loading="isSubmitting"
          >
            提交反馈
          </el-button>
          <el-button @click="resetForm">重置</el-button>
          
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { submitFeedBackService } from '@/apis/feedback'
  
  const router = useRouter()
  
  // 表单数据（使用ref + 解构保持响应式）
  const feedbackForm = ref({
    type: '',
    content: '',
    contact: ''
  })
  
  // 加载状态
  const isSubmitting = ref(false)
  
  // 表单引用
  const feedbackFormRef = ref(null)
  
  // 类型选项
  const typeOptions = [
    { label: '功能建议', value: 'suggestion' },
    { label: '问题反馈', value: 'bug' },
    { label: '其他问题', value: 'other' }
  ]
  
  // 表单验证规则
  const rules = {
    type: [{ required: true, message: '请选择反馈类型', trigger: 'change' }],
    content: [
      { required: true, message: '请输入反馈内容', trigger: 'blur' },
      { min: 10, message: '内容长度至少10个字符', trigger: 'blur' }
    ]
  }
  
  // 提交表单
  const submitFeedback = async () => {
    try {
      isSubmitting.value = true
      
      // 手动触发验证
      const valid = await feedbackFormRef.value.validate()
      if (!valid) return
  
      // 调用feedback.js中的API
      await submitFeedBackService(feedbackForm.value)
      
      ElMessage.success('反馈提交成功！')
      resetForm()
    } catch (error) {
      ElMessage.error(error.message || '提交失败')
    } finally {
      isSubmitting.value = false
    }
  }
  
  // 重置表单
  const resetForm = () => {
    feedbackFormRef.value?.resetFields()
  }
  
  // 返回首页
  const goHome = () => {
    router.push('/')
  }
  </script>
  
  <style scoped>
  .feedback-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .feedback-title {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
  }
  
  .back-home-btn {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  </style>